<script setup>
import { ref, onMounted } from 'vue';
import { User } from '@/api';


// 分组列表
let group_list = ref([]);
let load_group_list = async () => {
    let { status, msg, data } = await User.user_label_cate({ page: 1, limit: 20 })
    group_list.value = data;
    // console.log(data);
}


// 标签列表
let label_list = ref([]);
let count = ref(0)
let label_cate = ref('');
let page_size = ref(10)
let load_label_list = async () => {
    let { status, msg, data } = await User.get_user_label({ page: currentPage.value, limit: page_size.value, label_cate: label_cate.value })
    label_list.value = data.list;
    count.value = data.count;
    // console.log(data);
}
let currentPage = ref(1);
let handleCurrentChange = (val) => {
    currentPage.value=val;
    load_label_list();
}
let handleSizeChange = () => {
    load_label_list();
}

let activeName = ref('');

let handleClick_userLabel_tab = (tab, event) => {
    console.log(tab);
    label_cate.value = tab.props.name;
    console.log(label_cate.value);
    load_label_list();
}
onMounted(() => {
    load_group_list();
    load_label_list();
})
// 添加分类
let is_add_group = ref(false)
let add_group_form = ref([]);

let set_add_group = async (id) => {
    if (id === 0) {
        let { status, msg, data } = await User.user_label_cate_create();
        console.log(status, msg, data);
        add_group_form.value = data
    } else {
        let { status, msg, data } = await User.user_label_cate_edit(id);
        add_group_form.value = data
    }
    current_id.value = id;
    is_add_group.value = true
}
// 保存分类
let handle_save_add_group = async () => {
    if (current_id.value === 0) {
        let data = { name: add_group_form.value.rules[0].value, sort: add_group_form.value.rules[1].value }
        let { status, msg } = await User.save_user_label_cate(data);
        if (status) {
            is_add_group.value = false
            load_group_list();
        }
    } else {
        let data = { name: add_group_form.value.rules[0].value, sort: add_group_form.value.rules[1].value }
        console.log(data);
        let { status, msg } = await User.user_label_cate_save(current_id.value, data);

        if (status) {
            is_add_group.value = false
            load_group_list();
        }
    }

}

let remove_group = async (id) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await User.remove_user_label_cate(id);
            if (status == 200) {
                ElMessage.success(msg)
                load_group_list();
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}
// 添加标签
let is_add_label = ref(false);
let add_label_form = ref([]);
let current_id = ref(0)
let set_add_label = async (id) => {
    current_id.value = id;
    if (label_cate.value === '') { label_cate.value = 0 }
    let { status, msg, data } = await User.set_user_label(id);
    add_label_form.value = data;
    is_add_label.value = true;
}
// 保存标签
let handle_save_add_label = async () => {
    let data = { id: current_id.value };
    add_label_form.value.rules.forEach(item => {
        if (item.type === 'select') {
            data.label_cate = item.value;
        }
        if (item.type === 'input') {
            data.label_name = item.value;
        }
    });
    let { status, msg } = await User.user_label_save(data);
    console.log(msg);
    if (status) {
        label_cate.value = data.label_cate
        is_add_label.value = false
        load_label_list();
    }
}
// 删除标签
let remove_label = async (id) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await User.remove_user_label(id);
            if (status == 200) {
                ElMessage.success(msg)
                load_label_list();
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}

</script>
<template>
    <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick_userLabel_tab" tab-position="left" class="demo-tabs">
            <el-tab-pane :name="''">
                <template #label>
                    <span style="padding-right: 20px;">全部</span>
                </template>
                <el-button type="primary" @click="set_add_label(0)">添加标签</el-button>
                <el-button type="primary" @click="set_add_group(0)">添加分类</el-button>
                <el-table :data="label_list" style="width: 100%; margin-top: 15px;" border
                    :header-cell-style="{ backgroundColor: '#ececec' }">
                    <el-table-column prop="id" label="ID" />
                    <el-table-column prop="label_name" label="标签名称" />
                    <el-table-column prop="cate_name" label="分类名称" />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scoped">
                            <el-button link type="primary" size="small" @click="set_add_label(scoped.row.id)">修改</el-button>
                            <el-button link type="primary" size="small" @click="remove_label(scoped.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="group_list_pagination">
                    <span>共{{ count }}条</span>
                    <el-pagination :small="small" v-model:page-size="page_size" @size-change="handleSizeChange"
                        :page-sizes="[5, 10, 15]" :background="background" layout="sizes,prev, pager, next, jumper"
                        :total="count" @current-change="handleCurrentChange" />
                </div>
            </el-tab-pane>
            <el-tab-pane v-for="item in group_list" :name="item.id">
                <template #label>
                    <span style="padding-right: 20px;">{{ item.name }}</span>
                    <el-dropdown trigger="click"
                        :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                        <span class="el-dropdown-link">
                            <el-icon>
                                <MoreFilled></MoreFilled>
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="set_add_group(item.id)">编辑</el-dropdown-item>
                                <el-dropdown-item @click="remove_group(item.id)">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
                <el-button type="primary" @click="set_add_label(0)">添加标签</el-button>
                <el-button type="primary" @click="set_add_group(0)">添加分类</el-button>
                <el-table :data="label_list" style="width: 100%">
                    <el-table-column prop="id" label="ID" />
                    <el-table-column prop="label_name" label="标签名称" />
                    <el-table-column prop="cate_name" label="分类名称" />
                    <el-table-column fixed="right" label="操作">
                        <template #default="scoped">
                            <el-button link type="primary" size="small" @click="set_add_label(scoped.row.id)">修改</el-button>
                            <el-button link type="primary" size="small" @click="remove_label(scoped.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="group_list_pagination">
                    <span>共{{ count }}条</span>
                    <el-pagination :small="small" v-model:page-size="page_size" :page-sizes="[5, 10, 15]"
                        :background="background" layout="sizes,prev, pager, next, jumper" :total="count"
                        @current-change="handleCurrentChange" />
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 添加分类 -->
        <el-dialog v-model="is_add_group" :title="add_group_form.title">
            <el-form :model="add_group_form.rules">
                <el-form-item v-for="item in add_group_form.rules" :label="item.title" :value="item.value"
                    v-model="item.value">
                    <el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.props.placeholder" />

                    <el-input-number v-if="item.type === 'inputNumber'" :min="item.props.min" :max="item.props.max"
                        :label="item.title" :value="item.value" v-model="item.value" :placeholder="item.props.placeholder"
                        size="small" controls-position="right" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handle_save_add_group"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加标签 -->
        <el-dialog v-model="is_add_label" :title="add_label_form.title">
            <el-form :model="add_label_form.rules">
                <el-form-item v-for="item in add_label_form.rules" :label="item.title" :value="item.value"
                    v-model="item.value">
                    <el-select v-if="item.type === 'select'" clearable v-model="item.value"
                        :placeholder="item.props.placeholder"
                        :popper-options="{ modifiers: [{ name: 'computeStyles', options: { adaptive: false } }] }">
                        <el-option v-for="option in item.options" :label="option.label" :value="option.value" />
                    </el-select>
                    <el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.props.placeholder" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="handle_save_add_label"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style lang="less" scoped>.group_list_pagination {
    display: flex;
}</style>